<template>
  <BasicModal v-bind="$attrs" @register="addModal" width="50%" height="80%" @cancel='handCancel'>
    <div style="padding: 40px 20px 0 20px">
      <!-- <DepartRoleInfoTab :isShow="isShow" :isAdd="isAdd" :productId="orderMainModel.productId" /> -->
      <BasicTable @register="registerTable">
        <!--操作栏-->
        <template #action="{ record }">
          <TableAction :actions="getTableAction2(record)" />
        </template>
      </BasicTable>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref, computed, unref, reactive, onMounted } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import DepartRoleInfoTab from '../../device/ModelInfoList.vue';
  import { columns, searchFormSchema } from '../ModelInfo.data';
  import { getModelList, addProduct } from '../ModelInfo.api';
  import { useListPage } from '/@/hooks/system/useListPage'

  const isUpdate = ref(true);
  const orderMainModel = reactive({
    id: null,
    productName: '',
  });
  const dataSource = ref<Recordable[]>([]);
  const [addModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    setModalProps({ confirmLoading: false, showCancelBtn: data?.showFooter, showOkBtn: data?.showFooter });
    isUpdate.value = !!data?.isUpdate;
    if (unref(isUpdate)) {
      Object.assign(orderMainModel, data.record);
      reload()
      //注册table数据

    }

  })

  const { prefixCls, tableContext } = useListPage({
    tableProps: {
      title: '物模型表',
      api: getModelList,
      // dataSource: dataSource,
      columns,
      canResize: false,
      formConfig: {
        labelWidth: 120, // 设置所有的label宽
        schemas: searchFormSchema,
        autoSubmitOnEnter: true,
        showAdvancedButton: true
      },
      beforeFetch: (params) => {
        return Object.assign(params, { productId: orderMainModel.productId });
      },
      actionColumn: {
        width: 120,
      },
    },
  })

  const [registerTable, { reload }, { }] = tableContext

  async function handCancel(v) {
    Object.assign(isAdd, false);
  }
  function getTableAction2(record) {
    return [
      {
        label: '导入',
        onClick: handleAddproduct.bind(null, record),
      }
    ]
  }
  /**
   * 模型导入产品
   */
  async function handleAddproduct(record) {
    await addProduct({ modelId: record.modelId, productId: orderMainModel.productId }, reload);
    reload();
  }
</script>

<style lang="less">
</style>
